<script setup lang="ts">
import { useAttrs, ref, reactive, watch } from 'vue';
import $data, { onFormQueryRequest, emitFormQueryResult } from "xcore/data"

const attrs = useAttrs();
const form = ref<any>({});

// 初始化 form 对象，根据 attrs.searchFields 设置每个字段为空对象
if (attrs.searchFields) {
    (attrs.searchFields as any[]).forEach((element: any) => {
        form.value[element.name] = {};
    });
}


const formRef = ref<any>(null);
const dbTableInfo = ref<any>({});
const tabValueKey = ref("")
const tabFields = reactive([])
const activeTab = ref("")


// 获取数据库表元数据信息
$data.provider.meta.getMetaTable(attrs.DbTable?.id).then((res: any) => {
    dbTableInfo.value = res;
});

// 监听 groupGroup 属性变化，更新 tabsCmpnt 数组
watch(() => attrs.groupGroup?.dataDict, (attr: any) => {
    $data.provider.meta.getMetaDictById(attr as string).then((res: any) => {
        tabValueKey.value = res.value
        $data.provider.meta.getMetaDictByPid(attr as string).then((res: any[]) => {
            tabFields.length = 0
            res.forEach((item: any) => {
                tabFields.push({ label: item.label, value: item.value })
            });
        })
    })
}, { deep: true, immediate: true });

const tabChange = (val: any) => {
    attrs.meta.mdata[tabValueKey.value] = val
    activeTab.value = val
}


// 查询按钮点击事件处理函数
const query = () => {
    // 执行查询事件
    let formData = { ...attrs.meta.mdata };
    $data.provider.biz.query(attrs.DbTable.id, formData).then((res: any) => {
        emitFormQueryResult(attrs.DbTable.id, res,{pi:1,ps:10});
    });
};

// 监听查询事件，执行查询操作
onFormQueryRequest(attrs.DbTable.id,(res: any) => {
    let formData = { ...attrs.meta.mdata };
    $data.provider.biz.query(attrs.DbTable.id, formData, res.pi || 1, res.ps || 10).then((res: any) => {
        emitFormQueryResult(attrs.DbTable.id, res,{pi:res.pi || 1,ps: res.ps || 10});
    });
})



</script>
<template>
    <div>
        <!-- 标题栏 -->
        <div v-if="$attrs.titleGroup.showTitle" class="d-flex align-items-baseline justify-content-start"
            :class="$attrs.titleGroup.class">
            <span :class="$attrs.titleGroup.titleClass" class="me-2">
                {{ $attrs.titleGroup.useTableInfo ? dbTableInfo.title : $attrs.titleGroup.innerText }}</span>
            <span :class="$attrs.titleGroup.descClass">
                {{ $attrs.titleGroup.useTableInfo ? dbTableInfo.description : $attrs.titleGroup.desc }}</span>
        </div>
        <hr v-if="$attrs.titleGroup.showSplitLine" class="mt-1 text-muted" />

        <!-- 顶部分组栏 -->
        <div class="w-100" v-if="$attrs.groupGroup.show" :class="$attrs.groupGroup.class">
            <el-tabs class="w-100" v-model="activeTab" @tab-change="tabChange">
                <el-tab-pane v-if="$attrs.groupGroup.showAll" :label="$attrs.groupGroup.allLabel" name=""></el-tab-pane>
                <el-tab-pane v-for="item in tabFields" :key="item.name" :label="item.label"
                    :name="item.name"></el-tab-pane>
            </el-tabs>
        </div>

        <el-form inline v-model="$attrs.meta.mdata" v-bind="$attrs" :ref="formRef">
            <el-form-item :prop="field.name" v-for="field in $attrs.searchFields" :key="field.name"
                :label="$attrs.showLabel ? field.title : ''">
                <x-cmpnt-renders :cmpnts="$data.func.createCmpnt(field)" :data="$attrs.meta.mdata"
                    :parent="{}"></x-cmpnt-renders>
            </el-form-item>
            <el-form-item>
                <el-button v-if="$attrs.searchBtnGroup.show" type="primary" @click="query"
                    v-bind="$attrs.searchBtnGroup">{{ $attrs.searchBtnGroup.innerText }}</el-button>

            <x-cmpnt-renders :cmpnts="$attrs.searchBtnGroup.children" :data="$attrs.meta.mdata"
                    :parent="{}"></x-cmpnt-renders>
            </el-form-item>

        </el-form>
    </div>

</template>
<style scoped>
:deep(.el-form-item) {
    margin-right: 10px !important;
}
</style>